<!DOCTYPE html>
<html lang="zh-cmn-Hans">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
		<title>登录</title>
		<link rel="stylesheet" href="../../css/ui.min.css" />
		<link rel="stylesheet" href="../../css/iconfont.css" />
		<link rel="stylesheet" href="../../css/shop.css" />
	</head>
	<style>
		.form-button {
			margin: 40px 0;
		}
		
		.form-row {
			margin-bottom: 25px;
		}
		
		.other-bd .icon-weixindenglu {
			color: #1aac19;
		}
	</style>

	<body ontouchstart>
		<div class="form-main" id="app">
			<div class="form-logo">
				<img src="../../images/tx.jpg">
			</div>
			<div class="form-inner">
				<div class="form-row">
					<input type="text" v-model="phone_number" class="ui-input" placeholder="请输入手机号">
				</div>
				<div class="form-row">
					<input type="password" v-model="password" class="ui-input" placeholder="请输入密码">
				</div>
				<div class="form-button">
					<button class="ui-btn ui-btn-submit" tapmode @click="login" lock="">登录</button>
					<div class="form-link justify">
						<a href="javascript:(0);" id="yzmloging.html" class="link yzmloging">验证码登录</a>
						<a href="javascript:(0);" id="zhuce.html" class="link zhuce">新用户注册</a>
					</div>
				</div>
				<!-- <div class="other-box">
					<div class="other-hd" ><span>一键登录</span></div>
					<div class="other-bd">
						<a href=""><span class="iconfont icon-weixin"></span></a>
					</div>
				</div> -->
			</div>
		</div>

	</body>
	<script src="../../js/jquery-2.1.4.js"></script>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/vue.min.js"></script>
	<script src="../../js/common/config.js"></script>
	<script>
		mui.init({
			beforeback: function() {
				//获得列表界面的webview
				var list = plus.webview.getWebviewById('list');
				//触发列表界面的自定义事件（refresh）,从而进行数据刷新
				mui.fire(list, 'refresh');
				//返回true，继续页面关闭逻辑
				return true;
			}
		});
		var vm = new Vue({
			el: "#app",
			data: {
				phone_number: 18703403329,
				password: 123456,
			},
			methods: {
				login: function() {
					var _that = this;
					if (_that.phone_number == '') {
						alert("手机号不能为空");
					} else if (_that.password == '') {
						alert("密码不能为空");
					} else {
						console.log(this.phone_number);
						console.log(this.password);
						mui.ajax(Config.api.Login, {
							data: {
								phone_number: _that.phone_number,
								password: _that.password
							},
							dataType: 'json', //服务器返回json格式数据
							type: 'post', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							success: function(data) {
								console.log(JSON.stringify(data));
								mui.toast('登陆成功');
								setTimeout(function() {
									var opener = plus.webview.currentWebview().opener();
									opener.reload();
									mui.back();
								}, 500);
								// 储存用户登录信息
								localStorage.setItem('user_id', data.user_id);
								localStorage.setItem('token', data.token);
							},
							error: function(xhr, type, errorThrown) {
								//异常处理；
								console.log("接口错误");
							}
						});
					}
				},
			}
		});
		mui(".form-inner").on("tap", ".yzmloging", function() {
			var url = this.getAttribute("id"); //getAttribute()获取属性函数
			mui.openWindow({
				url: url,
				id: url,
				styles: {
					top: '0px', //新页面顶部位置
					bottom: '0px', //新页面底部位置
					popGesture: 'close'
				},
				extras: {},
				waiting: {
					autoShow: false
				}
			})
		});
		mui(".form-inner").on("tap", ".zhuce", function() {
			var url = this.getAttribute("id"); //getAttribute()获取属性函数
			mui.openWindow({
				url: url,
				id: url,
				styles: {
					top: '0px', //新页面顶部位置
					bottom: '0px', //新页面底部位置
					popGesture: 'close'
				},
				extras: {},
				waiting: {
					autoShow: false
				}
			})
		});
	</script>
</html>
